import React, { Component } from 'react'
import { NavBar, Icon, Tabs, Toast } from "antd-mobile";
import myaxios from "../../utils/myaxios"
import boxImg from "../../assets/images/empty_product.jpg"
import SearchBar from "../SearchBar/SearchBar"
import "./GoodList.css"

export default class GoodList extends Component {
    constructor(props) {
        super(props)
        this.GoodListRef = React.createRef()
        this.pagesize = 10
        this.pagenum = 1
    }
    state = {
        tabs: [{ title: "综合" }, { title: "销量" }, { title: "价格" }],
        goods: [],
    };

    componentDidMount() {
        console.log(this.props.location.search)
        let { search } = this.props.location
        let params = search.split("?")[1] || ""
        let params_arr = params.split("=")
        console.log(params_arr)
        if (params_arr[0] === "cid") {
            this.cid = params_arr[1];
        } else if (params_arr[0] === "query") {
            this.query = params_arr[1];
        }
        this.getProductList()
        // 注册监听事件
        // this.goodListRef.current.parentElement.addEventListener("scroll", this.handleScroll)
    }
    // 滑动
    handleScroll = () => {

        let parentElement = this.GoodListRef.current.parentElement
        // 客户端高度
        let clientHeight = parentElement.clientHeight
        // 列表高度
        let scrollHeight = parentElement.scrollHeight
        // 列表已经滚动的高度
        let scrollTop = parentElement.scrollTop
        if (scrollHeight - clientHeight - scrollTop <= 1) {
            this.getProductList()
        }
    }

    componentWillUnmount() {
        // 卸载监听事件
        this.GoodListRef.current.parentElement.removeEventListener("scroll", this.handleScroll)

    }

    getProductList = () => {
        let params = {}
        if (this.cid) {
            params["cid"] = this.cid
        }
        if (this.query) {
            params["cid"] = decodeURIComponent(this.cid)
        }
        if (this.total) params["pagenum"] = ++this.pagenum
        else params["pagenum"] = this.pagenum
        params["pagesize"] = this.pagesize
        if (this.pagenum > Math.ceil(this.total / this.pagesize)) {
            Toast.info("最后一页", 1)
        } else {
            myaxios.get("goods/search", {
                params: params
            }).then((res) => {
                console.log(res)
                this.total = res.total
                this.pagenum = res.pagenum
                this.setState({
                    goods: [...this.state.goods, ...res.goods]
                })
            })
        }
    }

    handlItemClick = (goods_id) => {
        this.props.history.push("/goodDetail/" + goods_id)
    }

    render() {
        return (
            <div className="GoodList">
                {/* 商品列表导航栏开始 */}
                <div className="GoodList-nav">
                    <NavBar
                        className="nav"
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}
                    >商品列表</NavBar>
                </div>
                {/* 商品列表导航栏结束 */}
                {/* 商品列表搜素框开始 */}
                <div className="GoodList-SearchBar">
                    <SearchBar></SearchBar>
                </div>
                {/* 商品列表搜素框结束 */}
                {/* 商品列表Tab切换栏开始 */}
                <div className="GoodList-tab">
                    <Tabs
                        tabs={this.state.tabs}
                        initialPage={0}
                        onChange={(tab, index) => {
                            console.log("onChange", index, tab);
                        }}
                        onTabClick={(index, tab) => {
                            console.log("onTabClick", index, tab)
                        }}
                        tabBarTextStyle={{ borderColor: "red" }}
                        tabBarTextStyle={{ fontWeight: "200", color: "black" }}
                    >
                        <div className="tab-comprehensive" ref={this.GoodListRef}>
                            {this.state.goods.map((v, goods_id) => {
                                return (
                                    <div
                                        className="comprehensive-item"
                                        key={v.goods_id}
                                        onClick={this.handlItemClick.bind(this, v.goods_id)}
                                    >
                                        <div className="item-left">
                                            <img src={v.goods_small_logo ? v.goods_small_logo : boxImg} alt="" />
                                        </div>
                                        <div className="item-right">
                                            <div className="item-right-top">{v.goods_name}</div>
                                            <div className="item-right-bottom">￥{v.goods_price}</div>
                                        </div>
                                    </div>
                                )
                            })}
                        </div>
                        <div className="volume">销量</div>
                        <div className="Price">价格</div>
                    </Tabs>
                </div>
                {/* 商品列表Tab切换栏结束 */}

            </div >
        )
    }
}
